<template>
  <div class="home">
    <!-- 轮播图组件 -->
    <!-- :auto="4000" 自动轮播的时间 -->
    <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item,index) in imgList" :key="index">
            <img :src="item.picUrl" alt="">
        </mt-swipe-item>
    </mt-swipe>
    <!-- 热门推荐 -->
    <div class="hotCommend">
        <div class="commendTitle">
            <p>热门推荐</p>
            <!-- <a>华语</a>
            <a>流行</a>
            <a>摇滚</a>
            <a>民谣</a>
            <a>电子</a>
            <a>更多</a> -->
        </div>
        <div class="recommendContent">
            <ul>
                <li v-for="(item,index) in recommendSong" :key="index" @click="toChild(item.id)">
                    <div class="recommendImg">
                        <img :src="item.picUrl" alt="">
                    </div>
                    <p class="recommendName">{{item.name}}</p>
                </li>
            </ul>
        </div>
    </div>
    <!-- 榜单 -->
    <div class="newCommend">
        <div class="newTitle">
            <p>最新推荐</p>
        </div>
        <div class="newCommend">
            <ul id="song">
                <li v-for="(item,index) in newCommend" :key="index" @click="play(item.id,index)">
                    <div class="num">
                        {{index+1}}
                    </div>
                    <div class="names">
                        <p class="name">{{item.name}}</p>
                        <span class="name1" v-for="(r,n) in item.song.artists" :key="n">{{r.name}}</span>
                        <span class="name1">--{{item.name}}</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>


//引入请求axios
import axios from "axios";
export default {
    data:function(){
      return{
        imgList:[],
        recommendSong:[],
        newCommend:[],
        songList:[],
        songNum:null
      }
    },
    mounted() { 
      //保存this指向
    var that = this;
        //this.axios.get("banner?timestamp=1503").then(function(res)...)
      axios.get("http://netease.bluej.cn/banner?timestamp=1503").then(function(res){

         that.imgList = res.data.banners;
      });
      axios.get("http://netease.bluej.cn/personalized?timestamp=1503").then(function(res){
        //   window.console.log("",res);
          that.recommendSong = res.data.result;
          that.recommendSong.length = 6;
         
      });
       axios.get("http://netease.bluej.cn/personalized/newsong?timestamp=1503").then(function(res){
        
        that.newCommend = res.data.result;
          for(let i=0;i<that.newCommend.length;i++){
              that.songList[i] = that.newCommend[i].id;
          }
      });
      this.$store.commit("changlist",{songList:this.songList,index:this.songNum})
    },
    methods:{
        toChild:function(songid){
            this.$router.push({path:"/detail",query:{id: songid}})
        },
        play:function(songid,index){
            //点击歌曲的方法
            //给vuex传递数据，从而更改状态
            //第二个参数必须时一个对象
            this.songNum = index;
            this.$store.commit("change",{
                playState:true,
                id:songid
                });
            this.$parent.$parent.$refs.player.getSong();
            this.$router.push({path:"/songdetail",query:{id:songid}});
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.active{
    background:#999;
}
    .home{
        .mint-swipe{
            height: 46vw;
            img{
                width:100%;
            }
        }
        .hotCommend{
            width:100vw;
            overflow: hidden;
            .commendTitle{
                
                width:100vw;
                p{
                    width:100vw;
                    height:7vh;
                    line-height: 7vh;
                    margin-left: 5px;
                    color:#000;
                    font-family: "微软雅黑";
                    border-left:2px solid purple;
                    background:#fcfcfd;
                     padding-left:5px;
                } 
                a{
                    padding: 0 7px;
                    color:#333;
                }
            }
        }
        .recommendContent{
            width:100vw;
            margin-top:2vh;
            margin-bottom:2vh;
            ul{
                width:100vw;
                display: flex;
                display: -webkit-flex; /* Safari */
                flex-direction:row;
                flex-wrap: wrap;
                justify-content:space-around;
                 align-content: center;
                li{
                    list-style: none;
                    width:30vw;
                    height:40vw;
                    margin-bottom:2vh;
                    img{
                        display: block;
                        width:100%;
                        height:28vw;
                    }
                    .recommendName{
                        height:12vw;
                        line-height:6vw;
                        font-size:14px;
                        overflow: hidden;
                        text-overflow:ellipsis;//文本溢出显示省略号
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                    }
                }
            }
        }
        .newCommend{
            .newTitle{
                p{
                    width:100vw;
                    height:7vh;
                    line-height: 7vh;
                    margin-left: 5px;
                    color:#000;
                    font-family: "微软雅黑";
                    border-left:2px solid purple;
                    background:#fcfcfd;
                    padding-left:5px;
                }
            }
            .newCommend{
                ul{
                    background:#fcfcfd;
                    li{
                        list-style: none;
                        width:100vw;
                        height:6vh;
                        text-indent: 10px;
                        margin-bottom:2vh;
                        padding-bottom:3vh;
                        border-bottom:1px solid #f6f6f7;
                        .num{
                            float:left;
                            width:10vw;
                            height:6vh;
                            line-height:6vh;
                            text-align: center;
                            color:#df3436;
                        }
                        .names{
                            float:left;
                            width:90vw;
                            .name{
                            font-size:18px;
                            color:#333;
                            }
                            .name1{
                                display:inline-block;
                                font-size:14px;
                                color:#888;
                            }
                        }
                       
                    }
                }
            }     

        }
    }
</style>
